<template>
	<view class="item-info-warp">
		<view class="item-tite">{{itemInfo.title}}</view>
		<view class="item-feature1">
			<text style="margin-right: 8rpx;" 
				:key="index" 
				v-for="(item,index) in introductionList"
				>{{item}}
			</text>
		</view>
		<view class="item-feature2">
			<view class="flex-aj-center feature active">省心租</view>
			<view class="flex-aj-center feature" v-for="(item,index) in tagsList" :key="index">{{item}}</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:['itemInfo'],
		computed:{
			introductionList(){
				return this.itemInfo.introduction?.split(' ') || []
			},
			tagsList(){
				return this.itemInfo.tags || []
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-info-warp{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.item-tite{
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
		.item-feature1{
			display: flex;
			text{
				font-weight: 300;
				font-size: 22rpx;
				color: #AEAEAE;
			}
		}
		.item-feature2{
			display: flex;
			.feature{
				background: #F2F6FB;
				font-weight: 300;
				font-size: 20rpx;
				color: #8488A5;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				box-sizing: border-box;
				margin-right: 10rpx;
			}
			.feature.active{
				background: #000000;
				color: #FFFFFF;
			}
		}
	}
</style>